
<template>
    <main class="login_box">
      <!-- <div class="login_title">
        登录
      </div> -->
      <div class="username">
        用户名: <input v-model="obj.username"/>
      </div>
      <div class="pass">
        密&nbsp;&nbsp;码: <input v-model="obj.passwd"/>
      </div>
      <div class="login_btn">
        <button
        @click="loginMethod">
          登录
        </button>
      </div>
    </main>
  </template>
  
<script setup>
import {ref} from 'vue'
import {reqLogin} from '../api/index.js'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
const store = useStore()
const router = useRouter()
const obj = ref({
  username: '',
  passwd: ''
})
const loginMethod = () => {
  let res = reqLogin({
    name: obj.value.username,
    passwd: obj.value.passwd
  })
  res.then((resp) => {
    // console.log('resp', resp);
    let {data } = resp;
    if (data.code == 200) {
      store.dispatch("setUser", data.resp_data)
      // 跳转到首页
      router.push({
        path:'/main/userList'
      })
    }else{
      // 弹窗错误
      alert(data.code_msg)
      console.log(data.code_msg);
    }
  }).catch(err => {
    console.log(err);
  })
}
  </script>
  
  
  <style scoped>
  .login_box{
    border: 1px solid black;
    width: 300px;
    height: 150px;
    margin: 0 auto;
    margin-top: 50%;
  }
  .login_btn {
    text-align: center;
  }
  .username {
   
    /* height: 60px;
    line-height: 50px; */
  }
  .pass, .username {
    color: black;
    margin: 20px;
  }
  </style>
  